<template>
  <div>
    <!--
    必备属性
      action 指定上传地址 请注意, 要对接腾讯云, 所以给个 # 号, 然后用一个 http-request 函数来替代即可
      file-list 管理图片的数组

    样式相关
      list-type 设置了照片墙的样式
      class 动态 class 设置已经有图片就不能再上传

    固定钩子
      on-preview 处理预览
      on-remove 处理删除图片
      on-change 处理添加图片

    上传相关
      http-request 替换默认上传行为, 后面需要对接腾讯云
   -->
    <el-upload
      action="#"
      :file-list="fileList"

      list-type="picture-card"
      :class="{disabled: fileList.length > 0}"

      :on-preview="onPreview"
      :on-remove="onRemove"
      :on-change="onChange"

      :before-upload="beforeUpload"
      :http-request="upload"
    >
      <i class="el-icon-plus" />
    </el-upload>

    <el-dialog title="预览" :visible="isShowPreview" @close="isShowPreview = false">
      <img :src="previewUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
const COS = require('cos-js-sdk-v5')

// SECRETID 和 SECRETKEY请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
const cos = new COS({
  SecretId: 'AKIDWszA4lvCCNJA8Gsi5FBrKe9WdS5bP61k',
  SecretKey: 'mIXZMbaNhV3asxLQFrXx6ze9VZPKyKgm'
})

export default {
  data() {
    return {
      isShowPreview: false,
      previewUrl: '',
      fileList: [
        // 这里是管理图片的数组, 每个图片都是一个对象, 其中 url 属性负责渲染图片
        // { url: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.bAMVo8JVST_rh5uWy4HXdQHaHa?pid=ImgDet&rs=1' }
      ]
    }
  },
  methods: {
    onPreview(file) {
      console.log(file)
      this.isShowPreview = true
      this.previewUrl = file.url
    },
    onRemove(file, newFileList) {
      // 我们的文件列表时单项 v-bind 帮到模板中
      // 没法自动更新数据, element ui 提供了这个钩子进行处理
      // 默认可以得到两个参数 被删除的文件, 删除后最新的文件列表
      // 手动王fileList放就行
      this.fileList = newFileList
    },
    onChange(file, newFileList) {
      this.fileList = newFileList
    },
    beforeUpload(file) {
      console.log(file)
      console.log('上传前校验')

      const maxSize = 1024 * 1024
      if (file.size > maxSize) {
        this.$message.error('图片必须在 1M 之内')
        return false
      }

      const type = ['image/jpeg', 'image/png']
      if (!type.includes(file.type)) {
        this.$message.error('目前只支持 jpeg / png 图片')
        return false
      }
    },
    upload(params) {
      // 这里替换上传组件的默认上传行为, 为了后续上传做准备
      console.log('真正上传')
      // 这里要联系腾讯云上传文件
      // 其中这个上传函数, element ui 会传入一些参数, 用 params 接收
      // 其中 params.file 就是图片文件本身
      console.log(params.file)
      const { file } = params

      cos.putObject({
        Bucket: 'hr72-1300310660', /* 填入您自己的存储桶，必须字段 */
        Region: 'ap-nanjing', /* 存储桶所在地域，例如ap-beijing，必须字段 */
        Key: file.name, /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
        StorageClass: 'STANDARD',
        Body: file, // 上传文件对象
        onProgress: function(progressData) {
          // 腾讯云配套上传中进度变化钩子
          console.log(JSON.stringify(progressData))
        }
      }, (err, data) => {
        // 腾讯云配套上传结束的钩子, 如果第一参数 err 不存在就是成功
        if (!err) {
          // 上传成功
          console.log(data)
          this.$message.success('上传成功')
          // element ui 不知道上传完毕, 需要通知
          // this.fileList[0].url = 'http://' + data.Location
          // this.fileList[0].status = 'success'
          // 如果上传的图片数量不止一张, 不一定是修改第一张图片地址
          // 而是上传哪张就改哪张, 上传的图片中,都有 uid 只要在 fileList 里面找到改就行了
          this.fileList.forEach(img => {
            if (img.uid === file.uid) {
              // 找到文件列表中 uid 跟正在上传图片 uid 相同的来改
              img.url = 'http://' + data.Location
              img.status = 'success'
            }
          })
        } else {
          // 上传失败
          console.log(err)
          this.$message.error('上传失败')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.disabled {
  // /deep/ .el-upload--picture-card {
  ::v-deep .el-upload--picture-card {
    display: none;
  }
}
</style>
